const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = env => {
    if(!env){
        env={}
    }
    let plugins = [
        new VueLoaderPlugin(),
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template:'./app/views/index.html'
        }),
    ];
    if(env.production){
        plugins.push(
            new webpack.DefinePlugin({
                'process.env':{
                    NODE_ENV:'production'
                }
            }),
            new MiniCssExtractPlugin({
                filename: 'style.css'
            })
        )
    }
    return {
        entry:{
            app:'./app/js/main.js'
        },
        devServer: { 
            contentBase: path.join(__dirname, "dist"),
            compress: true,
            port: 9000
        },
        module:{
            rules:[
                { test:/\.html$/, use:'html-loader' },
                { test:/\.vue$/, use:'vue-loader' },
                { 
                    test:/\.scss$/, 
                    use:[
                        'style-loader',
                        process.env.NODE_ENV !== 'production'
                        ? 'vue-style-loader'
                        : MiniCssExtractPlugin.loader,
                        {
                            loader: 'css-loader',
                            options: { modules: true }
                        },
                        {
                            loader: 'px2rem-loader',
                            options: {
                              remUni: 75,
                              remPrecision: 8
                            }
                        },
                        'sass-loader'
                    ] 
                },
            ]
        },
        plugins,
        resolve:{
            alias:{
                'vue$':'vue/dist/vue.esm.js'
            }
        },
        output:{
            path: path.resolve(__dirname,"dist"),
            filename:'[name].min.js'
        },
        mode:'development'
    }
}